<template>
   <div class="webChatBaseInfoDetails">
    <table class="call-detail">
      <tr  class="content cust-content header-top">
        <td>{{$t('qualityCheck.sessionId')}}{{info._id}}</td>
      </tr>
      <tr class="header">
        <td>
          <div class="left">
            <div class="el-toolip"> {{info.sName}}({{info.custName}}) </div>
          </div>
          <div class="middle">
            <p class="table-channel">{{$t('public.SourceChannel')}}</p>
            <p>
              <span class="arrow"></span>
            </p>
            <p>{{infoBeginTime}}</p>
          </div>
          <div class="right">
            {{info.userName}}
          </div>
        </td>
      </tr>

      <tr class="content">
        <td class="flex2">{{$t('public.time')}}</td>
        <td class="flex5">
           <div class="left">
              <span>
                <p>{{$t('webchat.claimTime')}}</p>
                <p>{{$t('webchat.conversationEdnTime')}}</p>
                <p>{{$t('webchat.firstResponseDate')}}</p>
              </span>
           </div>
           <div class="right">
               <span>
                <p>{{info.beginTime || '--'}}</p>
                <p>{{info.endTime || '--'}}</p>
                <p>{{firstReplyTime_show || '--'}}</p>
              </span>
           </div>
        </td>
        <td class="flex5">
          <div class="left">
            <span>
              <p>{{$t('webchat.dialogueDuration')}}</p>
              <p>{{$t('webchat.firstReplyDuration')}}</p>
            </span>
          </div>
          <div class="right" style="width: 50%;text-align: left">
            <span>
              <p>{{chatDurationTime}}</p>
              <p>{{firstResponseTimeLength}}</p>
            </span>
          </div>
        </td>
      </tr>

      <tr class="content">
        <td class="flex2">{{$t('sms.time')}}</td>
        <td class="flex5">
          <div class="left">
              <span>
                  <p>{{$t('public.satisfaction')}}</p>
                  <p>{{$t('webchat.msgNum')}}</p>
                  <p>{{$t('webchat.endType')}}</p>
                  <!-- <p>{{$t('qualityCheck.agentSubmitTime')}}</p> -->
              </span>
          </div>
          <div class="right">
              <span>
                <p>{{info.satisfaction || '--'}}</p>
                <p>{{info.totalMsgCount || '--'}}</p>
                <el-tooltip v-if="info.finishReason" class="item" effect="dark" :content="info.finishReasonTitle" placement="bottom">
                  <p class="widthEllipsis">{{info.finishReason}}</p>
                </el-tooltip>
                <p v-else>--</p>
              </span>
          </div>
        </td>
        <td class="flex5">
          <div class="left">
              <span>
                 <p>{{$t('webchat.searchKeyword')}}</p>
                 <p>{{$t('public.city')}}</p>
              </span>
          </div>
          <div class="right">
              <span>
                 <p>{{info.seoKeywords || '--'}}</p>
                 <p>{{info.area || '--'}}</p>
              </span>
          </div>
        </td>
      </tr>

      <tr class="main" v-if="isIntelligent">
        <td class="flex2">{{$t('public.qualityCheck')}}</td>
        <td class="flex5">
          <div class="left">
            <span>
              <p>{{$t('qualityCheck.qualityGrade')}}</p>
            </span>
          </div>
          <div class="right">
              <span>
                <p v-if="newResultGrade" style="font-size: 14px;color:red" >{{newResultGrade}}</p>
                <p v-else >--</p>
              </span>
          </div>
        </td>
        <td class="flex5">
          <div class="left">
              <span>
                <p>{{$t('qualityCheck.qualityControlPersonnel')}}</p>
              </span>
          </div>
          <div class="right">
              <span>
                <p>{{info.gradeUser_show || '--'}}</p>
              </span>
          </div>
        </td>
      </tr>

      <tr class="content cust-content">
        <td class="flex2">{{$t('public.remark')}}</td>
        <td class="flex10">
          <p>{{info.remark}}</p>
        </td>
      </tr>
    </table>
   </div>
</template>

<script>
  import { millsToDate } from '@utils/m7Utils.js'
  export default {
    name: 'webChatBaseInfoDetails',
    props: {
      info: Object,
      default: {},
      isIntelligent: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      scoreStatus: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      resultGrade: {
        type: Number,
        default: function () {
          return 0
        }
      },
      inputFlag: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    computed: {
      infoBeginTime () {
        return this.info.beginTime ? this.info.beginTime.split(' ')[0] : '' // 截取来源渠道下面的时间
      },
      firstReplyTime_show () {
        return this.info.firstReplyTime ? this.timestampToTime(this.info.firstReplyTime) : '' // 初次响应
      },
      newResultGrade () { // 智能质检评分
        if (this.inputFlag) {
          return this.resultGrade
        } else {
          if (this.info.type === 'auto') {
            return this.resultGrade
          } else {
            return this.info.gradeAmount
          }
        }
      },
      firstResponseTimeLength () {
        if (this.info && this.info.beginTime && this.info.firstReplyTime) {
          return millsToDate(Date.parse(new Date(this.info.firstReplyTime)) - Date.parse(new Date(this.info.beginTime)))
        } else {
          return '00:00:00'
        }
      },
      chatDurationTime () {
        if (this.info && this.info.chatDuration) {
          return this.info.chatDuration
        } else {
          let chatDuration = '00:00:00'
          if (this.info.lastTimeStamp && this.info.manualTime) {
            chatDuration = millsToDate(new Date(this.info.lastTimeStamp).getTime() - new Date(this.info.manualTime).getTime())
          }
          return chatDuration
        }
      }
    },
    methods: {
      timestampToTime (timestamp) {
        let date = new Date(timestamp)
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
        let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'
        let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':'
        let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return Y + M + D + h + m + s
      }
    }
  }
</script>

<style lang="stylus" scoped>
@import '../../../assets/common.styl'
  .transTip
    height 40px
    line-height 40px
    background #FAFAFA
    border-top: 2px solid #E6E6E6
    border-bottom: 2px solid #E6E6E6
    span.fr.iconfont
      margin-right 16px
      font-size 16px
      color #459AE9
      cursor pointer
    span.fr.iconfont.rota
      transform rotate(180deg)
    .tran
      margin-left 16px
      color #000000
      .iconfont
        color #A6A6A6
        margin-right 2px
      .tipi
        margin-left 16px
        color #878787
  .wrapper
    height 280px
    position relative
    overflow-y scroll
    background #FAFAFA
    .wrap_img
      padding-top 70px
      text-align center
      img
        width 256px
        height 66px
      p
        font-size:12px;
        line-height:18px;
        margin-top 26px
        span
          color #459AE9
          cursor pointer
    .content1
      padding 28px 20px 2px 16px
  .dialout-phone
    max-width 13em
  .call-detail
    width 100%
    border-collapse collapse
    border 1px solid $c-border1
    .el-button
      color $cf-gray1
      font-size 12px
    tr
      border-top 1px solid $c-border1
      td
        .auto
          height auto
    tr.header-top
      border-top 0
      height 36px
      line-height 36px
      text-align center
      td
        width 100%
    tr:hover td
      /*background $c-back*/
  .header
    display flex
    height 80px
    td
      display flex
      width 100%
      .left
        flex 4
        display flex
        align-items center
        justify-content center
        .dvv
          display: inline-block;
          position: relative;
          top: 3px;
        .dvv8
          display: inline-block;
          position: relative;
          top: 3px;
          line-height 1

        .mar
          margin-left: 8px
          line-height: 14px
        div
          i
            margin-right 6px
            color: $cf-level4
          span
            font-size: 12px
            color: $cf-gray2
          span:nth-child(2)
            display inline-block
            padding 0 10px 0
          span:nth-child(3)
            margin-left: 6px

      .middle
        flex 2
        p:nth-child(1)
          display flex
          justify-content center
          margin-top 16px
          font-size 14px
        .table-channel:nth-child(1)
          font-size 12px
        p:nth-child(2)
          margin-top 8px
          display flex
          justify-content center
        p:nth-child(3)
          margin-top 5px
          display flex
          justify-content center
          color: $cf-gray2
      .arrow
        display inline-block
        positon relative
        width 160px
        height 1px
        border-bottom 2px solid $cf-gray7
        &:after
          content ''
          display inline-block
          margin -6px 0 10px 158px
          border-bottom 9px solid $cf-gray7
          border-right 9px solid transparent

      .right
        flex 4
        display flex
        align-items center
        justify-content center
        span
          margin-left:6px
          font-size: 12px
          color: $cf-gray2
        i
          color: $cf-level4
  .content
    height 125px
    display flex
    td:nth-child(1)
      color: $cf-level1
      font-size: 14px
    .flex2
      flex 2
      text-align center
      line-height 120px
      font-size 16px
      font-weight bold
    .flex5
      display flex
      flex 5
      border-left 1px solid $c-border1
      .left
        /*flex 3*/
        width: 45%
        height: 125px
        display table
        span
          display: table-cell;
          vertical-align: middle;
          p
            text-align right
            margin-top: 10px
            font-size: 12px
            color: $cf-gray6
            margin-right 10px
      .right
        /*flex 4*/
        width: 55%
        display table
        height: 125px
        span
          display: table-cell;
          vertical-align: middle;
          p
            text-align left
            font-size: 12px
            margin-top: 10px
            color: $cf-gray2
  .quality-check-grade
    height 70px
    line-height 70px
    .flex2
      line-height 70px
    .flex5 .left, .flex5 .right
      height 70px
      line-height 70px
    .flex5>span
      color $c-main
      display inline-block
      width 100%
      text-align center
      cursor pointer
  .cust-content
    height 70px
    line-height 70px
    .flex2
      line-height 70px
    .flex10
      display flex
      flex 10
      border-left 1px solid $c-border1
      p
        line-height 70px
        padding-left 30px
        color: $cf-gray1

  .main
    height 125px
    display flex
    td:nth-child(1)
     color: $cf-level1
     font-size: 14px
    .flex2
      flex:2
      text-align center
      line-height 115px
      font-size 16px
      font-weight bold
    .flex5
      display flex
      flex 5
      border-left 1px solid $c-border1
      font-size: 12px;
      color: $cf-gray6;
      .left
        /*flex 3*/
        width: 45%
        display table
        height: 125px
        span
          display: table-cell;
          vertical-align: middle;
          p
            text-align right
            margin-right 10px
            margin-top: 10px
      .right
        /*flex 4*/
        width:55%
        display table
        height: 125px
        span
          display: table-cell;
          vertical-align: middle;
          font-size: 12px;
          color: $cf-gray2;
          button
            padding: 0;
            margin-left: -4px;
            font-size: 12px;
            color: $cf-gray2;
            margin-top: 10px
            font-weight normal
          div
            margin-top: 10px
            i
              display table-cell
              position: relative;
              top: 4px;

          p
            margin-top: 10px
          span
            margin-top: 10px

  .record
    height 80px
    td:nth-child(1)
     color: $cf-level1
     font-size: 14px
    td
      display flex
      width 100%
      height 80px
      .left
        flex 1
        text-align center
        >p
          margin-top 25px
          font-size 16px
          font-weight bold
        span p
          margin-top 3px
      .right
        flex 5
        position relative
        border-left 1px solid $c-border1
        .audio-wrap
          line-height 100px
          margin-left 10px
  .mediaRecognition
    min-height 40px
    height 100%
    td
      display flex
      height 100%
      min-height 40px
      .left
        flex 1
        display flex
        justify-content center
        align-items center
        font-size 16px
        font-weight bold
        p
          color: $cf-level1
          font-size: 14px
      .right
        flex 5
        border-left 1px solid $c-border1
  .remark
    td
      box-sizing border-box
      padding 0 15px
      box-sizing border-box
      padding 0 15px
    .remarks
      border-radius 3px
      width 100%
      margin 13px 0 9px 0
      box-sizing border-box
      color $cf-gray0
      padding 4px 6px
      background #fafafa
      border-color $c-border1

  .table-agent
    max-width 5em
  .table-agent-ten
    max-width 90px
    cursor pointer
  .many-queue
    max-width 10em
    cursor pointer
  .table-agent-five
    max-width 90px
    cursor pointer
  .icon
    cursor pointer
  .icon-guanbi
    font-size 12px
    font-weight bold
  .remove-warn
    line-height 34px
  .remove-btn
    text-align right
    margin 0
  .exhalation
    color $cf-color0
  .incoming
    color $cf-color2
.content .no-border
  border-left 0
.highlight
  color red
.table-channel
  color #ff8c19
.widthEllipsis
  white-space nowrap
  max-width 130px
  display inline-block
  overflow hidden
  text-overflow ellipsis
</style>
